<template>
  <el-table
    class="bc-table nobc"
    border
    :data="dataInfo.tableData"
    style="width: 100%; height: 100%"
    v-loading="loading"
  >
    <el-table-column
      type="index"
      :index="indexMethod"
      width="60px"
      label="序号"
    >
    </el-table-column>
    <el-table-column prop="itemName" label="字段名" />
    <el-table-column prop="itemNameChn" label="中文描述">
      <template #default="scope">
        <span style="color: #2263bf" v-if="!props.isEdit">{{
          scope.row.itemNameChn
        }}</span>
        <el-input v-else v-model="scope.row.itemNameChn" />
      </template>
    </el-table-column>
    <el-table-column prop="itemType" label="类型"> </el-table-column>
    <el-table-column prop="itemLength" label="长度" />
    <el-table-column prop="ifNull" label="非空" />
    <el-table-column prop="filterAble" label="是否可选">
      <template #default="scope">
        <span style="color: #2263bf" v-if="!props.isEdit">{{
          scope.row.filterAble == 1 ? "是" : "否"
        }}</span>
        <el-select v-else v-model="scope.row.filterAble" class="noborder-select" placeholder="请选择">
          <el-option
            v-for="item in [
              { label: '是', value: '1' },
              { label: '否', value: '0' },
            ]"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </template>
    </el-table-column>
    <el-table-column prop="itemComment" label="备注">
      <template #default="scope">
        <span style="color: #2263bf" v-if="!props.isEdit">{{
          scope.row.itemComment
        }}</span>
        <el-input v-else v-model="scope.row.itemComment" />
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { getsjmlField, updatesjmlField } from "@/api/sjml";
import { onMounted } from "vue";
let loading = ref(false);
let route = useRoute();
const indexMethod = (index) => {
  return index + 1;
};
const props = defineProps({
  isEdit: Boolean,
});

const emit = defineEmits(["totalValue"]);

onMounted(() => {
  getTableData();
});

let dataInfo = reactive({
  tableData: [],
  cancelInfo: [],
});

// 获取数据
const getTableData = async () => {
  try {
    loading.value = true;
    let { data } = await getsjmlField({
      objectId: route.query.id,
    });
    dataInfo.tableData = data.itemInfos;
    dataInfo.cancelInfo = JSON.parse(JSON.stringify(data.itemInfos));
    loading.value = false;
    emit('totalValue', dataInfo.tableData.length)
  } catch (error) {
    console.error(error);
  }
};

// 保存
const saveInfo = async () => {
  try {
    loading.value = true;
    let { data } = await updatesjmlField({
      itemInfos: dataInfo.tableData,
    });
    dataInfo.cancelInfo = JSON.parse(JSON.stringify(dataInfo.tableData));
    loading.value = false;
  } catch (error) {
    console.error(error);
  }
};

// 取消
const cancelInfo = () => {
  dataInfo.tableData = JSON.parse(JSON.stringify(dataInfo.cancelInfo));
};

defineExpose({
  saveInfo,
  cancelInfo,
});
</script>

<style lang="scss">
</style>